<template>
    <div>
      <my-header></my-header>
      <breadcrumb>
        <span>Goods</span>
      </breadcrumb>
      <div class="accessory-result-page accessory-page">
        <div class="container" style="position:relative;">
          <button style="border:1px solid #999;position:absolute;right: 10px;top:-50px;padding:10px;" 
            type="button" @click="addGoodsShow = true">add goods</button>
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0);" class="default" :class="{cur: sort === 1}" @click="changeSort(1)">Default</a>
            <a href="javascript:void(0);" class="price" :class="{cur: sort === -1}" @click="changeSort(-1)">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
            <a href="javascript:void(0);" class="filterby stopPop" @click="showFilterPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" :class="{'filterby-show': filterBy}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd>
                  <a @click="priceFilterClick('all')" :class="{cur: priceChecked === 'all'}">All</a>
                </dd>
                <dd v-for="(item, index) in priceFilter" :key="index">
                  <a @click="priceFilterClick(index)" :class="{cur: priceChecked === index}">{{item.endPrice ? item.startPrice + ' ~ ' + item.endPrice : item.startPrice}}</a>
                </dd>
              </dl>
            </div>
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="(item, index) in goodsList" :key="index">
                    <div class="pic">
                      <a href="#"><img v-lazy="item.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice | currency('￥')}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(item)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="busy" 
                    infinite-scroll-distance="30"
                    >
                    <div style="text-align:center;" v-show="loading">
                      <img src="../assets/loading-spinning-bubbles.svg" alt="">
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
      <Modal :modalShow="mdShow" @closeModal="mdShow = false">
        <p slot="message">
          请先登录，否则无法加入到购物车中
        </p>
        <div slot="btnGroup">
          <a href="javascript:void(0);" class="btn btn--m" @click="mdShow=false">关闭</a>
        </div>
      </Modal>
      <Modal :modalShow="addCartShow" @closeModal="addCartShow = false">
        <p slot="message">
          <svg class="icon-status-ok">
            <use xmins:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          </svg>
          <span>加入购物车成功！</span>
        </p>
        <div slot="btnGroup">
          <a href="javascript:void(0);" class="btn btn--m" @click="addCartShow=false">继续购物</a>
          <router-link href="javascript:void(0);" class="btn btn--m" to="/cart">查看购物车</router-link>
        </div>
      </Modal>
      <Modal :modalShow="addGoodsShow" @closeModal="addGoodsShow = false">
        <ul slot="message">
          <li style="text-align: left;margin-bottom: 5px;">productName: </li>
          <li class="regi_form_input">
            <i class="icon IconPeople"></i>
            <input type="text" v-model="productName" name="productName" class="regi_login_input">
          </li>
          <li style="text-align: left;margin-bottom: 5px;">salePrice:</li>
          <li class="regi_form_input">
            <i class="icon IconPeople"></i>
            <input type="text" v-model="salePrice" name="salePrice" class="regi_login_input">
          </li>
          <li style="text-align: left;margin-bottom: 5px;">productImage:</li>
          <li class="regi_form_input noMargin" v-show="!productImage">
            <i class="icon IconPeople"></i>
            <label style="cursor:pointer;display: block;position:relative;text-align:center;">
              上传图片
              <input style="width: 0;height:0;position:absolute;opacity:0;" 
                type="file" @change="imgUpload" ref="productImageInput" class="regi_login_input">
            </label>
            
          </li>
          <li v-show="productImage">
            <span style="cursor:pointer;color:red;font-size:30px;position:relative;top:-90px;left:115px;" @click="clearImage">&times;</span>
            <img style="border:1px solid #999;" width="100" height="100" :src="productImage" alt="">
          </li>
        </ul>
        <div slot="btnGroup">
          <a href="javascript:void(0);" class="btn btn--m" @click="reset();addGoodsShow=false">关闭</a>
          <a href="javascript:void(0);" class="btn btn--m" @click="addGoodsSure">保存</a>
        </div>
      </Modal>
      <my-footer></my-footer>
    </div>
</template>
<script>
  import myHeader from '@/components/MyHeader'
  import myFooter from '@/components/MyFooter'
  import breadcrumb from '@/components/Breadcrumb'
  import Modal from '@/components/Modal'
  export default{
    components: {
      myHeader, myFooter, breadcrumb, Modal
    },
    data(){
      return {
        priceFilter: [
          {startPrice: '0.00', endPrice: '100.00'},
          {startPrice: '100.00', endPrice: '500.00'},
          {startPrice: '500.00', endPrice: '1000.00'},
          {startPrice: '1000.00', endPrice: '2000.00'},
          {startPrice: '2000以上', endPrice: ''},
        ],
        priceChecked: 'all',
        goodsList: [],
        filterBy: false,
        overLayFlag: false,
        pageNo: 1,
        pageSize: 10,
        sort: 1,
        busy: true,
        loading: false,
        mdShow: false,
        addCartShow: false,
        addGoodsShow: false,
        productName: '',
        salePrice: '',
        productImage: ''
      }
    },
    mounted () {
      this.getGoodsList()
    },
    methods: {
      priceFilterClick (index) {
        this.priceChecked = index
        this.pageNo = 1
        this.getGoodsList()
      },
      showFilterPop () {
        this.filterBy = true
        this.overLayFlag = true
      },
      closePop () {
        this.filterBy = false
        this.overLayFlag = false
      },
      getGoodsList (flag) {
        this.loading = true
        this.$axios.get(`/goods/list?pageNo=${this.pageNo}&pageSize=${this.pageSize}&sort=${this.sort}&priceLevel=${this.priceChecked}`, (res) => {
          setTimeout(() => {
            this.loading = false
          }, 300)
          if (flag) {
            this.goodsList = [...this.goodsList,...res.result.list]
            if (res.result.count === 0) {
              this.busy = true
            } else {
              this.busy = false
            }
          } else {
            this.goodsList = res.result.list
            this.busy = false
          }
        })
      },
      changeSort (n) {
        this.sort = n
        this.pageNo = 1
        this.getGoodsList()
      },
      loadMore () {
        this.pageNo++;
        this.busy = true;
        setTimeout(() => {
          this.getGoodsList(true);
        }, 500)
      },
      addCart (item) {
        this.$axios.post('/goods/addCart', {
          userId: 111,
          productId: item.productId
        }, (res) => {
          this.addCartShow = true
          this.$store.commit('updateCartCount', 1)
        }, (err) => {
          if (err.status === '10001') {
            this.mdShow = true
          }
        })
      },
      addGoodsSure () {
        if (!this.productName || !this.salePrice || !this.productImage) {
          alert('请完善内容填写')
          return 
        }
        this.$axios.post('/goods/addGoods', {
          productName: this.productName,
          salePrice: this.salePrice,
          productImage: this.productImage
        }, (res) => {
          this.addGoodsShow = false
          this.pageNo = 1
          this.getGoodsList()
        })
      },
      imgUpload () {
        if (this.$refs.productImageInput.value === '') {
          return
        }
        let file = this.$refs.productImageInput.files[0]
        this.productImage = window.URL.createObjectURL(file)
        var formData = new FormData();
        formData.append("productImage", file);
        this.$axios.postFile('/goods/upload', formData, (res) => {
          this.productImage = res.result
        }, (err) => {
          alert('上传失败')
          this.productImage = ''
          this.$refs.productImageInput.value = ''
        })
      },
      reset () {
        this.productImage = ''
        this.$refs.productImageInput.value = ''
        this.salePrice = ''
        this.productName = ''
      },
      clearImage () {
        this.productImage = ''
        this.$refs.productImageInput.value = ''
      }
    }
  }
</script>
